<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link href="css/normalize.css" rel="stylesheet">
    <style type="text/css">
    body,html{
      height:100%;
      background-color: #ececec;
      font-size: 14px;
    }
    .wrap{
      padding: 10px 40px 0 40px;
    }
    .label-wrap{
      margin-top: 20px;
    }
    .label-wrap label{
      width: 60px;
      display: block;
    }
    .label-wrap{
      display: flex;
    }
    .ui-item{
      flex:1;
    }
    .svg-wrap{
      text-align: center;
    }
    .svg-wrap>div{
      margin: 10px;
      display:inline-block;
      text-align: center;
    }
    .svg-wrap svg{
      max-width: 64px;
      max-height: 64px;
    }
    .svg-title{
      margin-bottom: 10px;
    }
    .svg-w{
      display: flex;
      justify-content:center;
      align-items: center;
    }
    .input-width{
      width:140px;
      resize:none;
    }
    .savebutton{
      background:#4fa3f6;
      color:white;
      border: 1px solid #1465fb;
      border-radius:5px;
      padding:0 15px;
      float:right;
      cursor: pointer;
      font-size: 12px;
    }
    .savebutton:active{
      background:#3485f0;
    }
    .buttonwrap{
      margin-top:10px;
    }
    .login-mag{
      display: none;
    }
    .cell{
      align-items:center;
      position:relative;
      display:flex;
      padding:10px 30px;
      width:100%;
      box-sizing:border-box;
      font-size:17px;
      text-align:left;
      text-decoration:none;
      color:#555555;
      background-color:white;
      font-size: 17px;
      border:0;
    }
    .cell + .cell:before{
      position:absolute;
      content:'';
      left:15px;
      top:0;
      right:0;
      border-top:1px solid #EEEEEE;
    }
    .cell-title{
      width:50px;
      margin-left:10px;
      color:#555555;
    }
    .cell-input{
      flex:1;
    }
    .cell-input input{
      color:#555555;
      border:0;
      width:100%;
    }
    .login-mag{
      height:100%;
      box-sizing:border-box;
      background-color: #ececec;
      padding-top:50px;
    }
    .loginbtnwrap{
      padding:40px 30px 0 30px;

    }
    .loginbutton{
      border-radius:100px;
      line-height:48px;
      font-size:17px;
      color:#ffffff;
      background:#1A8CC2;
      text-align:center;
      cursor: pointer;
    }
    .register{
      display: block;
      margin:10px;
      float:right;
      color:#1A8CC2;
      font-size: 12px;
      cursor: pointer;
    }
    .a-link{
      margin-left:-50px;
      cursor: pointer;
      color:#08B3F6;
    }
    </style>
  </head>
  <body >
    <div class="wrap">
      <div class="svg-wrap">
          <div>
            <div class="svg-title" style="color:red;">待上传 icon</div>
            <div class="svg-w" id="svg-wrap"></div>
          </div>
          <div style="display:none">
            <div class="svg-title">历史 icon</div>
            <div class="svg-w" id="history-wrap">
            </div>
          </div>
      </div>
      <div class="label-wrap">
        <label>上传者</label>
        <div class="ui-item">
          <input readonly="readonly" id="upload-username" class="input-width" type="text" />
        </div>
        <div class="a-link">更换用户</div>
      </div>
      <div class="label-wrap">
        <label>名称</label>
        <div class="ui-item">
          <input id="svg-name" class="input-width" type="text" />
        </div>
      </div>
      <div class="label-wrap">
        <label>项目</label>
        <div class="ui-item">
          <select id="project" class="input-width" >
            
          </select>
        </div>
      </div>
      <div class="label-wrap">
        <label>分类</label>
        <div class="ui-item">
          <select id="type" class="input-width" >
          </select>
        </div>
      </div>
      <div class="label-wrap">
        <label>备注</label>
        <div class="ui-item">
          <textarea class="input-width" id="bz" style="height:50px"></textarea>
        </div>
      </div>
      <div class="buttonwrap">
        <div class="savebutton">保存</div>
      </div>
    </div>
    <div class="login-mag">
      <div class="cell">
        <div class="cell-title">
          用户
        </div>
        <div class="cell-input">
          <input id="username" type="text" />          
        </div>
      </div>
      <div class="cell">
        <div class="cell-title">
          密码
        </div>
        <div class="cell-input">
          <input id="password" type="password" />          
        </div>
      </div>
      <span class="register">申请帐号</span>
      <div class="loginbtnwrap">
        <div class="loginbutton">登录</div> 
      </div>
    </div>
    
    
  <script type="text/javascript">
    var encodeSVG = '';
    var svgtest = '';
    var projectID = '';
    var typeID = '';
    var project = [];
    var init = function(data){
      encodeSVG = data.svg;
      svgtest = data.svgtest;

      $('#svg-wrap').append($(decodeURIComponent(data.svg)));
      $('#svg-name').val(decodeURIComponent(svgtest));

      if(data.isLogin){
        project = data.project;
        appendType();
        $('#upload-username').val(data.nametest);
      }else{
        $('.wrap').hide();
        $('.login-mag').show();
      }
    }
    var appendType = function(){
      var projectDom = [];
      for(var i = 0 ;i<project.length;i++){
        projectDom.push('<option value="'+project[i].projectId+'">'+project[i].projectName+'</option>')
      }
      $('#project').append(projectDom.join(''));
      var typeDom = [];
      projectID = $('#project').val();
      for(var i = 0 ;i<project.length;i++){
        if(project[i].projectId == projectID){
          for(var k = 0;k<project[i].categoryList.length;k++){
            typeDom.push('<option value="'+project[i].categoryList[k].categoryId+'">'+project[i].categoryList[k].categoryName+'</option>')
          }
        }
      }
      $('#type').empty().append(typeDom);
      typeID = $('#type').val();
    }
    $('#project').on('change',function(){
      projectID = $(this).val();
      var typeDom = [];
      for(var i = 0 ;i<project.length;i++){
        if(project[i].projectId == projectID){
          for(var k = 0;k<project[i].categoryList.length;k++){
            typeDom.push('<option value="'+project[i].categoryList[k].categoryId+'">'+project[i].categoryList[k].categoryName+'</option>')
          }
        }
      }
      $('#type').empty().append(typeDom);
    });
    $('#type').on('change',function(){
      typeID = $(this).val();
    })
    

    function sLogin(data){
      if(data.status == 200){
        $('.login-mag').hide();
        $('.wrap').show();
        isLogin = true;
        project = data.project;
        $('#upload-username').val(data.nametest);
        appendType();
      }else{
        $('#password').val('');
      }
    }

    $('.register').on('click',function(){
      SMAction('submit',{type:'link',link:'http://www.baidu.com'});
      return;
    })

    $('.a-link').on('click',function(){
      $('.wrap').hide();
      $('.login-mag').show();
      SMAction('submit',{type:'loginout'});
      return;
    })
    
    $('.loginbutton').on('click',function(){
      var username = $('#username').val();
      var password = $('#password').val();
      SMAction('login',{
        username:username,
        password:password
      });
    })

    $('.savebutton').on('click',function(){
      SMAction('submitandclose',{name:$('#svg-name').val(),content:encodeSVG,project:projectID,type:typeID,author:$('#upload-username').val()});
      return;
    })

    $('#svg-name').on('change',function(){
      SMAction('pushdata',{
        projectid:projectID,
        svgname:$('#svg-name').val(),
        content:encodeSVG
      })
      return;
    })

    function pushdata(){
      
    }

  </script>
  </body>
</html>
